<script setup>
import Navbar  from "@/components/Navbar.vue";
</script>

<template>
<div class="container">
    <div class="left">
      <div class="leftphoto"> 
      <!-- <img src="./painting.jpg" alt="很出名的画" style="box-shadow: 0 0 10px rgba(0,0,0,0.5);" width="500" height="700"   /> -->
      </div>
    </div>
    <div class="right">
      <div class="painting-info">
        <h2 style="color: #666462;">苏绣</h2>
        <button class="jifen-button"><b>积分余额：1500</b></button>
        <h3 style="color:#666462">已售20</h3>
        <h3 style="color:#666462">所需积分20000</h3>
      </div>
      <div class="action-buttons">
        <button class="buy-button">购买</button>
        <button class="cart-button">加入购物车</button>
      </div>
      <div class="content">
        <p><b>苏绣是中国四大名绣之一，以其精细的针法和生动的色彩闻名。</b></p>
        <p><b>这幅作品中的绣法细腻，色彩层次丰富，</b></p>
        <p><b>充分展现了苏绣艺术的细节处理和色彩表现力。</b></p>
        <p><b>画面的波浪采用渐变的蓝绿色，细致地表现出水的流动感和透明感，</b></p>
        <p><b>而云朵则用白色和灰色交错，增添了画面的深度和立体感。</b></p>
      </div>
      <div class="divider"></div>

      <div class="comment-container">
        <div class="comment-info">
          <button class="comment-button">评论区</button>
          <p class="comment-count">30+</p>
        </div>
        <div class="comment">
          <img src="../../../assets/user/userphoto1.png" alt="用户1" class="comment-avatar">
          <div class="comment-content">
            <h4 class="comment-name">一川月白</h4>
            <p class="comment-text">
              这幅苏绣作品通过精细的刺绣技艺成功捕捉了大自然的壮观和宁静。海浪的表现尤为惊艳，绣线层层叠叠，巧妙地使用了不同深浅的蓝绿色调，让每一个波峰看起来都生动活泼，仿佛随时都能从画幅中涌出。</p>
          </div>
        </div>
        <div class="comment">
          <img src="../../../assets/user/userphoto2.png" alt="用户2" class="comment-avatar">
          <div class="comment-content">
            <h4 class="comment-name">自渡</h4>
            <p class="comment-text">整件作品不仅是一件视觉艺术品，也体现了中国传统手工艺的非凡技艺和美学追求。它适合作为高端装饰品或收藏品，能够为任何空间增添一抹东方美学的风情。</p>
          </div>
        </div>
        <div class="comment">
          <img src="../../../assets/user/userphoto3.png" alt="用户3" class="comment-avatar">
          <div class="comment-content">
            <h4 class="comment-name">水下月</h4>
            <p class="comment-text">无论是作为私人收藏还是公共展览，这幅苏绣都能够显著地提升环境的艺术氛围和文化价值。</p>
          </div>
        </div>
      </div>
    </div>
</div>
</template>

<style scoped>
.container{
  background-color: #f6f3f0;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  display: flex; /* 使用flex布局来更好地控制左右两边的排列 */
  align-items: center; /* 垂直居中 */
}
.left{
  width: 35%;
  height:80%;
  margin-bottom:12vw;
  display: flex;
   
  justify-content: center; /* 水平居中 */
  background-color: #F4F2EE;
}
.leftphoto{
  margin-top:80px;
  margin-left:5vw;
  margin-right:2vw;
  height: 80vh;
  width: 100vw;
  border-radius: 15px;
  background-image: url("../../../assets/eshopping/painting.png");
  background-position:center;
  background-size: cover;
}
/* .leftphoto img{
  border-radius: 15px;
} */
.right{
  width: 65%; /* 增加宽度以适应更多的内容 */
  height: 100%;
  padding: 20px;
  overflow-y: auto; /* 如果内容超出，允许垂直滚动 */
  box-sizing: border-box; /* 使得padding和border不会增加元素的总宽度 */
  background-color: #F4F2EE; /* 提供一个白色背景，使内容更清晰 */
  /*border-left: 1px solid #fd3a00; */
}
.painting-info h2{
  margin-bottom: 15px;
}
.painting-info h3 {
  margin-bottom: 15px; /* 增加元素之间的间距 */
}

.painting-info h2{
  font-size: 48px;
}
.jifen-button{
  border:none;
  background-color: #DDD9CF;
  margin-bottom: 5vh;
  width: 137px;
  height: 40px;
  border-radius: 12px;
  float:right;
  font-size:16px;

}
.buy-button{
  height: 40px;
  width: 75px;
  border:none;
  border-radius: 15px;
  margin-right:50px;
  background-color: #DEC687;
  text-align: center;
  margin-bottom: 30px;
  font-size: 18px;
}
.cart-button{
  height: 40px;
  width: 110px;
  border:none;
  border-radius: 15px;
  margin-right:100px;
  background-color: #E1D8C2;
  text-align: center;
  margin-bottom: 30px;
  font-size: 18px;
}
.content{
  font-size: 20px;
  /* margin-right: 300px; */
  width: 50vw;
}
.content p {
  margin: 0 0 1em 0; /* 为段落设置底部外边距，以便在它们之间有空间 */
}
.right {
  /* 确保右侧容器使用flex布局 */
  display: flex;
  flex-direction: column; /* 垂直布局 */
}
.comment-container {
  /* 将comment-container移动到积分按钮下方 */
  margin-top: -500px; /* 根据需要调整间距 */
  margin-left: 42vw;
}
.comment-info {
  display: flex;
  align-items: center; /* 垂直居中按钮和文字 */
}

.comment-button {
  background-color: #DDD9CF;
  height: 35px;
  width: 80px;
  border: none;
  border-radius: 15px;
  text-align: center;
  margin-right: 10px; /* 调整按钮右侧间距 */
  font-size:16px;
}
.comment-count {
  height:10px;
}
.comment {
  display: flex;
  align-items: center; /* 头像和评论内容垂直居中 */
  margin-bottom: 0px; /* 评论之间的间距 */
}
.comment-name{
  margin-bottom: 1vh;
}
.divider {
  border-left: 2px solid black; /* 竖线的宽度和颜色 */
  height: 500px; /* 竖线的高度 */
  display: inline-block; /* 使竖线能在行内显示 */
  margin: 0 10px; /* 竖线两边的外边距 */
  margin-top:-250px;
  margin-left: 40vw;
}

.comment-avatar {
  width: 50px; /* 头像大小 */
  height: 50px;
  border-radius: 50%; /* 圆形头像 */
  margin-right: 10px; /* 头像与评论内容的间距 */
}
</style>
